---
id: 614206033d366c090ca7dd42
title: Schritt 17
challengeType: 0
dashedName: step-17
---

# --description--

Die Schriftart ist für die Barrierefreiheit einer Seite sehr wichtig. Einige Schriftarten sind leichter zu lesen als andere, vor allem auf Bildschirmen mit niedriger Auflösung.

Ändere die Schriftart für sowohl die `h1`- als auch für die `h2`-Elemente zu `Verdana`, und verwende eine andere websichere Schriftart aus der Familie der Serifenlosen als Fallback.

Füge außerdem einen `border-bottom` von `4px solid #dfdfe2` den `h2`-Elementen hinzu, um die Abschnitte zu unterscheiden.

# --hints--

Du solltest einen Mehrfach-Elementselektor verwenden, um `h1`- und `h2`-Elemente auszuwählen.

```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('h1, h2') || gs('h2, h1'));
```

Du solltest den ersten Wert der `font-family`-Eigenschaft auf `Verdana` ändern.

```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const style = gs('h1, h2') || gs('h2, h1');
assert.include(style?.fontFamily, 'Verdana');
```

Du solltest den zweiten Wert der Eigenschaft `font-family` auf eine andere serifenlose, websichere Schriftart ändern. _Tipp: Ich würde Tahoma wählen_.

```js
// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS.
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const style = gs('h1, h2') || gs('h2, h1');
assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
```

Du solltest einen `h2`-Elementselektor verwenden, um die `h2`-Elemente auszuwählen.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
```

Du solltest `h2` eine `border-bottom`-Eigenschaft von `4px solid #dfdfe2` geben.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

--fcc-editable-region--

--fcc-editable-region--

```
